import { Inject } from '../decorates/inject';
import { Draw } from './draw';
import '../styles/scroll.less';
import { Config } from './config';
import { debounceTime, find } from 'rxjs/operators';
import { fromEvent } from 'rxjs';
import { takeUntil, map,concatAll } from 'rxjs/operators';
@Inject()
export class Scroll {
    private container: HTMLElement;
    private vertical: IScollEle;
    private horizontal: IScollEle;
    constructor(private draw: Draw, private conf: Config) {
        
    }
    public zInit() {
        this.draw.sub.subscribe((res) => {
            this.createScrollContainer();  
            this.listenVisualChange();
            this.bindDrag();
        });
    }
    protected bindDrag() {
        const mouseDown = fromEvent<MouseEvent>(this.horizontal.container, "mousedown");
        const mouseMove = fromEvent<MouseEvent>(this.horizontal.container, "mousemove");
        const mouseUp = fromEvent<MouseEvent>(this.horizontal.container, "mouseup");  
        mouseDown
            .pipe(
                map(e => {
                    // const { left, top } = e.target.getBoundingClientRect();
                    const clickOffsetX = e.clientX;
                    const clickOffsetY = e.clientY;
                    return {
                        clickOffsetX,
                        clickOffsetY
                    };
                }),
                map(({ clickOffsetX, clickOffsetY }) => {
                    return mouseMove.pipe(
                        takeUntil(mouseUp),
                        map(moveEvent => ({
                            x: moveEvent.clientX - clickOffsetX,
                            y: moveEvent.clientY - clickOffsetY
                        }))
                    );
                }),
                concatAll()
            )
            .subscribe(({ x, y }) => {
                // target.style.left = `${x}px`;
                // target.style.top = `${y}px`;
                console.log('---------------')
            });
        fromEvent(this.vertical.bar, 'mousedown').subscribe(res => {
            
        });
    }
    protected listenVisualChange() {
        let containerSize = {
            h: this.draw.container.clientHeight,
            w: this.draw.container.clientWidth
        }
        let maxHeight = Math.min(Math.ceil(containerSize.h/4), 100);
        let maxWidth  = Math.min(Math.ceil(containerSize.w/4), 100);
        this.conf.visualAreaChange.pipe(debounceTime(3)).subscribe(res => {
            if(res.type == 'startRow' || res.type == 'visualMaxRow') {
                let top = this.conf.startRow / Math.max(this.conf.visualMaxRow, this.conf.availableRow) * containerSize.h;
                let height =  (this.conf.visualMaxRow - this.conf.startRow) / this.conf.availableRow * containerSize.h;
                let finalH = 0;
                if(height > maxHeight) {
                    finalH = maxHeight;
                }
                if(height <= 100) {
                    finalH = 100;
                }
                this.vertical.bar.setAttribute('style', `top: ${top}px; height: ${finalH}px`);
            }
            if(res.type == 'startCol' || res.type == 'visualMaxCol') {

            }
        });
    }
    protected createScrollContainer() {
        this.container = document.createElement('div');
        this.container.setAttribute('class', 'z-excel-scroll-container');
        this.vertical = this.createScroll('v');
        this.container.appendChild(this.vertical.container);
        this.horizontal = this.createScroll('h');
        this.container.appendChild(this.horizontal.container);
        this.container.addEventListener('click', (evt: MouseEvent) => {
            evt.stopPropagation();
            evt.cancelBubble = true;
        });
        this.container.addEventListener('mousemove', (evt: MouseEvent) => {
            evt.stopPropagation();
            evt.cancelBubble = true;
        });
        this.container.addEventListener('mouseup', (evt: MouseEvent) => {
            evt.stopPropagation();
            evt.cancelBubble = true;
        });
        this.container.addEventListener('mousedown', (evt: MouseEvent) => {
            evt.stopPropagation();
            evt.cancelBubble = true;
        });
        this.draw.container.appendChild(this.container);
    }
    protected createScroll(direct: 'v'|'h'): IScollEle {
        let ele = document.createElement('div');
        if(direct == 'v') { 
            ele.setAttribute('class', 'scroll v-bar');
        }else{
            ele.setAttribute('class', 'scroll h-bar');
        }
        let innerBar =  document.createElement('div');
        innerBar.setAttribute('class', 'bar');
        ele.append(innerBar);
        return {
            container: ele,
            bar: innerBar
        }
    }
}
interface IScollEle {
    container: HTMLElement;
    bar: HTMLElement
}